import { Image, Space, Switch, Popconfirm } from 'antd';
import styles from './index.less';

interface columnsProps {
  handleEdit: (record: any) => void;
  handleSwitch: (id: number) => void;
  handleDelete: (id: number) => void;
  handleSave: (value: any) => void;
}

const columns = ({
  handleEdit,
  handleSwitch,
  handleDelete,
  handleSave,
}: columnsProps) => {
  return [
    {
      title: '轮播图片',
      dataIndex: 'img_url',
      width: 150,
      align: 'center',
      render: (_text: any, record: any) => <Image src={record.img_url} />,
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: 150,
      align: 'center',
    },
    {
      title: '跳转链接',
      dataIndex: 'url',
      align: 'center',
      width: 210,
    },
    {
      title: '是否禁用',
      dataIndex: 'status',
      align: 'center',
      render: (_text: any, record: any) => (
        <Switch
          checkedChildren="启用"
          unCheckedChildren="禁用"
          defaultChecked={record.status}
          onChange={() => handleSwitch(record.id)}
        />
      ),
    },
    {
      title: '排序',
      dataIndex: 'seq',
      align: 'center',
      width: 100,
      editable: true,
      onCell: (record: any) => ({
        record,
        editable: true,
        dataIndex: 'seq',
        title: '排序',
        handleSave: handleSave,
      }),
      shouldCellUpdate: (record: any, prevRecord: any) => {
        if (record.seq !== prevRecord.seq) {
          return true;
        } else {
          return false;
        }
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updated_at',
      width: 200,
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      render: (_text: any, record: any) => (
        <Space>
          <span onClick={() => handleEdit(record)} className={styles.spanStyle}>
            编辑
          </span>
          <Popconfirm
            title="确认删除?"
            onConfirm={() => handleDelete(record.id)}
          >
            <span className={styles.spanStyle}>删除</span>
          </Popconfirm>
        </Space>
      ),
    },
  ];
};

export default columns;
